<template>
  <u-popup
    z-index="9"
    v-model="show"
    mode="bottom"
    border-radius="24"
    safe-area-inset-bottom
    closeable
  >
    <view class="pop">
      <view class="title">取消订单</view>

      <view class="des"> 请选择取消订单的原因（必选）： </view>

      <view class="list">
        <view
          class="item"
          @click="status = item.status"
          v-for="item of list"
          :key="item.id"
        >
          <view class="icon">
            <i
              v-if="item.status === status"
              class="iconfont icon-success-fill"
            ></i>
            <i v-else class="iconfont icon-xuanzekuangmoren"></i>
          </view>

          <view class="name">{{ item.msg }}</view>
        </view>
      </view>

      <view class="btn"><view @click="orderCancel">确定</view></view>
    </view>
  </u-popup>
</template>

<script>
import { orderCancelReason, orderCancel } from "@/api/marketing/callOut";

export default {
  props: {
    item: {
      type: Object,
      default: null,
    },
  },

  data() {
    return {
      show: false,
      list: [],
      status: undefined,
    };
  },

  watch: {
    show(e) {
      if (!e) {
        this.status = undefined;
      }
    },
  },

  methods: {
    async orderCancel() {
      try {
        let { status, item } = this;
        if (status === undefined) return this.$utils.toast("请选择取消原因！");

        const res = await orderCancel(
          {
            id: item.id,
            status,
          },
          true
        );
        if (!res.code) {
          this.$utils.showModal("提示", "取消成功！", false, () => {
            this.show = false;
            this.Emit.$emit("handle", "rest");
          });
          return;
        }

        this.$utils.toast(res.msg);
      } catch (error) {
        throw new Error(error);
      }
    },
  },

  async mounted() {
    const res = await orderCancelReason();
    if (!res.code) {
      this.list = res.data || [];
    }
  },
};
</script>

<style lang="less" scoped>
.pop {
  padding: 24rpx;
}

.title {
  font-size: 32rpx;
  font-weight: 600;
  color: #262626;
}

.btn {
  padding: 12rpx 0;

  view {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 76rpx;
    border-radius: 32px;
    background: #f0250e;
    font-size: 26rpx;
    color: #fff;
  }
}

.des {
  padding-top: 50rpx;
  font-size: 30rpx;
  font-weight: bold;
}

.item {
  display: flex;
  padding: 10rpx 0;

  .icon {
    position: relative;
    top: -2rpx;
  }

  .iconfont {
    font-size: 40rpx;
  }

  .icon-success-fill {
    color: #f0250e;
  }

  .name {
    margin-left: 20rpx;
    font-size: 28rpx;
    color: #262626;
  }
}

.list {
  padding: 14rpx 0 20rpx;
}
</style>
